<template>
  <div class="app-main">
    <div class="contenBox">
      <el-form :inline="true" class="demo-form-inline" :model="formData">
        <el-row>
          <el-form-item
            label="库区编号"
            :rules="[{ required: true, trigger: 'blur' }]"
          >
            <el-input
              style="width: 239px"
              :disabled="true"
              v-model="formData.code"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="所属仓库"
            :rules="[
              { required: true, message: '请选择仓库类型', trigger: 'blur' },
            ]"
          >
            <el-select
              placeholder="请选择"
              style="width: 240px"
              v-model="formData.warehouseId"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="item in List"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="库区名称"
            :rules="[
              { required: true, message: '请输入库区名称', trigger: 'blur' },
            ]"
          >
            <el-input
              placeholder="请输入"
              style="width: 228px"
              v-model="formData.name"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="温度类型"
            :rules="[
              { required: true, message: '请选择温度类型', trigger: 'blur' },
            ]"
          >
            <el-select
              placeholder="请选择"
              style="width: 228px"
              v-model="formData.temperatureType"
            >
              <el-option label="常温" value="CW"></el-option>
              <el-option label="冷藏" value="LC"></el-option>
              <el-option label="恒温" value="HW"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            label="承重类型"
            :rules="[
              { required: true, message: '请选择承重类型', trigger: 'blur' },
            ]"
          >
            <el-select
              placeholder="请选择"
              style="width: 240px"
              v-model="formData.bearingType"
            >
              <el-option label="重型" value="ZX"></el-option>
              <el-option label="轻型" value="QX"></el-option>
              <el-option label="中型" value="BX"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="用途属性"
            :rules="[
              { required: true, message: '请选择类型', trigger: 'blur' },
            ]"
          >
            <el-select
              placeholder="请选择"
              style="width: 240px"
              v-model="formData.useType"
            >
              <el-option label="入库缓存区" value="RKHCQ"></el-option>
              <el-option label="出库缓存区" value="CKHCQ"></el-option>
              <el-option label="存储区" value="CCQ"></el-option>
              <el-option label="分拣区" value="FJQ"></el-option>
              <el-option label="质检区" value="ZJQ"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="负责人"
            :rules="[
              { required: true, message: '请输入负责人', trigger: 'blur' },
            ]"
          >
            <el-input
              style="width: 240px"
              v-model="formData.personName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <el-form-item label="联系电话">
            <el-input
              placeholder="请输入"
              style="width: 240px"
              v-model="formData.phone"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="库区状态" style="margin-left: 10px">
            <el-radio v-model="formData.status" label="1">启用</el-radio>
            <el-radio v-model="formData.status" label="0">停用</el-radio>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item style="margin-left: 400px; margin-top: 10px">
            <el-button class="un" @click="$router.push('/regionManagement')"
              >返回</el-button
            >
            <el-button class="minor" @click="sumbit">提交</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { KQ, list, area } from '@/api/home'
export default {
  data () {
    return {
      options: [],
      List: [],
      formData: {
        code: '',
        name: '',
        personName: '',
        phone: '',
        useType: '',
        temperatureType: '',
        status: '1',
        bearingType: '',
        warehouseId: ''
      }
    }
  },
  created () {
    this.KQ()
    this.list()
  },
  methods: {
    // 提交
    async sumbit () {
      await area(this.formData)
      this.$router.push('/regionManagement')
    },
    // 所属仓库
    async list () {
      const res = await list()
      console.log(res.data.data)
      this.List = res.data.data
    },
    // 库区编号
    async KQ () {
      const res = await KQ()
      // console.log(res)
      this.formData.code = res.data.data
    }
  }
}
</script>

<style scoped lang="scss">
.app-main {
  min-height: calc(100vh - 50px);
  background-color: #fdfafa;
  width: 100%;
  position: relative;
  overflow: hidden;
  .contenBox {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    margin-top: 20px;
    margin-left: 29px;
    margin-right: 29px;
    padding: 30px;
    .el-row {
      margin-top: 30px;
      .un {
        background: #f8f5f5;
        color: #332929;
        height: 40px;
        border-radius: 20px;
        border: 0;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        // line-height: 40px;
        padding-left: 26px;
        padding-right: 26px;
        cursor: pointer;
        outline: 0;
        width: 170px;
        margin: 0 15px;
      }
      .minor {
        width: 170px;
        margin: 0 15px;
        height: 40px;
        border-radius: 20px;
        border: 0;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        // line-height: 40px;
        padding-left: 26px;
        padding-right: 26px;
        cursor: pointer;
        outline: 0;
        background: #ffb200;
        color: #332929;
      }
    }
  }
}
</style>
